<template>
  <div class="flex flex-wrap gap-4 items-center">
    <el-select
      v-model="userId"
      :disabled="disabled"
      :multiple="multiple"
      placeholder="请选择人员"
      style="width: 240px"
    >
      <el-option
        v-for="item in userList"
        :key="item.id"
        :label="item.nickname"
        :value="item.id"
      />
    </el-select>
  </div>
</template>
<script>
import { getAllUser } from "@/api/user.ts";

export default {
  name: "userSelector",
  props: {
    modelValue: [String, Array],
    multiple: {
      type: Boolean,
      default() {
        return false;
      }
    },
    disabled: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  emits: ["update:modelValue"],
  data() {
    return {
      userList: [],
      keyword: "",
      userId: this.modelValue ? this.modelValue : this.multiple ? [] : ""
    };
  },
  watch: {
    userId(nv, ov) {
      this.$emit("update:modelValue", nv);
    }
  },
  async mounted() {
    let res = await getAllUser(1, 1000, this.keyword);
    if (res.code === 200) {
      this.userList = res.data;
    }
  }
};
</script>
